<template>
  <el-tabs type="card" v-model="activeName">
    <el-tab-pane label="申请单" name="1"
      ><flowForm v-if="flowData && activeName == '1'"><slot :flowData="flowData" /></flowForm
    ></el-tab-pane>
    <el-tab-pane v-if="flowData" label="流程图" name="2"><flowChart /></el-tab-pane>
    <el-tab-pane v-if="accessory" label="附件" name="3" style="height: 650px; overflow: auto">
      <template #label>
        <el-badge :value="Enclosure.length" class="item" :max="99" type="primary">
          <span>附件</span>
        </el-badge>
      </template>
      <newsEnclosure :Enclosure="Enclosure"></newsEnclosure>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { flow } from './utils/api'
import flowChart from './Chart/flowChart.vue'
import flowForm from './Form/form.vue'
import newsEnclosure from '@/components/newsEnclosure/index.vue'
import { string } from 'mathjs'
export default {
  name: 'public_process',
  data() {
    return {
      flowData: null,
      activeName: '1',
    }
  },
  components: {
    flowChart,
    flowForm,
    newsEnclosure,
  },
  provide() {
    return {
      parent: this,
    }
  },
  beforeMount() {
    const { taskId, processInstanceId, type } = this.$route.query
    this.type = Number(type) ?? 0
    if (taskId || processInstanceId) {
      flow({ taskId: taskId || '', processInstanceId: processInstanceId || '' }).then((res) => {
        this.flowData = res.data
      })
    } else if (this.taskId || this.processInstanceId) {
      flow({ taskId: this.taskId || '', processInstanceId: this.processInstanceId || '' }).then(
        (res) => {
          this.flowData = res.data
        }
      )
    }
  },
  props: {
    //任务id
    taskId: {
      type: String,
      default: '',
    },
    //实例id  任务跟实例id必传其中一个
    processInstanceId: {
      type: String,
      default: '',
    },
    onSubmit: {
      //通过按钮的携带函数
      type: Function,
      default: undefined,
    },
    onSuccessful: {
      //流程操作按钮成功之后的回调
      type: Function,
      default: undefined,
    },
    accessory: {
      //是否显示附件
      type: Boolean,
      default: false,
    },
    Enclosure: {
      //附件列表
      type: Object,
    },
    labelType: {
      type: String,
    },
    //类名
    className: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.process_box {
  width: 100%;
  height: 100%;
  background: red;
}
:deep(.el-badge__content.is-fixed) {
  position: absolute;
  top: 10px;
  right: 0;
}
</style>
